<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ include file='../Templates/security.jsp' %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


<script type="text/javascript">
    var tipo = "";
    var tipo_i = false;
    var tipo_seleccionado = false;
    var subtipo = "";
    var marca = "";
    var calificacion = "";

    // Estas no cambian
    var offset = 0;
    var tam = 0;
    var limit = 0;

    // Llamamos al método por primera vez para obtener el tamna
    consultarImplemento();

    function consultarImplemento(){
        $.getJSON("consultarImp.do",{tipo: tipo,
            subtipo :subtipo, marca: marca, calificacion: calificacion,
            limit: limit, offset: offset},
        function(data) {

            // (Cambia en todos los script)
            // Lo unico que cambia en esta parte es el llamado del método
            if(limit != 0){
                $('#resultado').empty();
                var fila = 0;
                var clase;
                $.each(data.consultarImplemento , function(i,item){
                    // Esto se hace para pintar el fondo de las filas pares e impares. (NO CAMBIA)
                    if ( (i % 2) == 0){
                        fila = "<tr bgcolor = \"#fff\"> ";
                    }
                    else{
                        fila = "<tr bgcolor = \"#ecf2f6\">";
                    }

                    var strcalif = "";
                    if(item.calificacion == '0'){
                       strcalif = "Sin Calificación";
                    }
                    if(item.calificacion == '1'){
                       strcalif = "Deficiente";
                    }
                    if(item.calificacion == '2'){
                       strcalif = "Regular";
                    }
                    if(item.calificacion == '3'){
                       strcalif = "Bueno";
                    }
                    if(item.calificacion == '4'){
                       strcalif = "Muy Bueno";
                    }
                    if(item.calificacion == '5'){
                       strcalif = "Excelente";
                    }

                    var string = fila+"<td>"+item.tipo+"</td><td>"+
                        item.subtipo+"</td><td>"+item.marca+"</td><td>"
                        +item.status+"</td><td>"+item.duracion_estimada+"</td><td>"+
                        item.duracion_real+"</td><td>"+strcalif+
                        "</td><td>"+item.caracteristicas_adicionales+"</td><td>"+
                        item.frecuencia_de_uso+"</td>"+
                        "<td ><img onclick='return modificarImplemento("+item.id_implemento+");' src='style/images/table_edit1.png' alt='Modificar Implemento' width='20' height='20'></td></tr>";
                    fila++;
                    $('#resultado').append(string)
                });
            }
            else{
                // Se pinta la tabla en la página. (Cambia en todos los script)
                // Lo unico que cambia en todos los script es el llamado a la función.
                $.each(data.consultarImplemento , function(i,item){
                    tam = parseInt(item.tam);
                });
                limit = 10;



            }
        }
    );

        // Aqui se decide las paginas: Actual y totales (NO CAMBIA)
        if(limit!=0){
            $("#currentpage").empty();
            $("#pagelimit").empty();
            $("#currentpage").append((offset/limit)+1);
            $("#pagelimit").append(Math.floor((tam-1)/limit)+1)
        }

    }

    function setTipo(idtipo){
        tipo = idtipo;
        subtipo = "";
        consultarImplemento();
    }
    function setSubtipo(idsubtipo){
        subtipo = idsubtipo;
        consultarImplemento();
    }
    function setMarca(idmarca){
        marca = idmarca;
        consultarImplemento();
    }
    function setCalificacion(idcalificacion){
        calificacion = idcalificacion;
        consultarImplemento();
    }
    // Se fija el número de páginas totales de la consulta
    function setLimit(limite){
        offset = 0;
        limit = parseInt(limite);
        consultarImplemento();
    }

    // Se fijan los alcances de las flechas primera, última, siguiente y anterior
    function setOffset(i, completo){
        if(completo && (i==-1)){
            offset = 0;
        }
        else if(completo && (i==1)){
            offset = Math.floor((tam-1)/limit)*limit;
        }
        else if(!completo && i==-1){
            if(offset>=limit){
                offset -= limit;
            }
        }
        else{ //!completo && i==1
            if(offset<tam-limit){
                offset += limit;
            }
        }
        consultarImplemento();
    }

    function selecionarTipo(value){
        if(tipo_i!= value){
            tipo_i = value;
            $('#subtipoI').empty();
            seleccionarSubtipo();
        }
    }

    function seleccionarSubtipo(){
        $.getJSON("listaSubtipoImplemento.do",
        function(data) {
            if(tipo_seleccionado!=tipo_i){

                $('#subtipoI').empty();
                var string = "<option value='' selected/>";
                $.each(data.Subtipo, function(i,item){
                    if(tipo_i == item.nombre){
                        var string = "<option value='"+item.subtipo+"' >"+item.subtipo+"</option>";
                        $('#subtipoI').append(string)
                    }
                });
                tipo_seleccionado=tipo_i;
            }
        });
    }
</script>

<script type="text/javascript">
    // Este script determina que la primera vez que se ve la tabla (sin resultados),
    // el numero de paginas y la pagina actual serán 1. (NO CAMBIA)
    if(limit == 0){
        $("#currentpage").append(1);
        $("#pagelimit").append(1)
    }
</script>

<h1 class="title">Gestión de Implementos</h1>
<hr>
<p class="meta"></p>
<div class="entry">
    <center>

        <h2>Consultar Implementos</h2>
        <table>
            <tbody id="consultarImp" >
                <br>
                <tr>
                    <td>Tipo del Implemento:</td>
                    <td>
                        <select id="tipoI" name="tipo" onclick="selecionarTipo(value)" onchange="setTipo(value)">
                            <option value="" selected/>
                            <script type="text/javascript">
                                $.getJSON("listaTipoImplemento.do",
                                function(data) {
                                    $.each(data.Tipo, function(i,item){
                                        if(tipo_i != item.nombre){
                                            var string = "<option value='"+item.nombre+"' >"+item.nombre+"</option>";
                                            $('#tipoI').append(string);
                                        }
                                    });
                                });
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Subtipo del Implemento:</td>
                    <td>
                        <select id="subtipoI" name="subtipo" onchange="setSubtipo(value)" onclick="seleccionarSubtipo()">
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Marca del Implemento:</td>
                    <td>

                        <input id="marcaI" name="marca" onchange="setMarca(value)"/>
                    </td>


                </tr>
                <tr>
                    <td>Calificación:</td>
                    <td>
                        <select name="calificacion" onchange="setCalificacion(value)">
                            <option value=""></option>
                            <option value="0">Sin Califiación</option>
                            <option value="1">Deficiente</option>
                            <option value="2">Regular</option>
                            <option value="3">Bueno</option>
                            <option value="4">Muy Bueno</option>
                            <option value="5">Excelente</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <br>
        <br>
        <html:button property="" value="  Mostrar Todo  " onclick="consultarImplemento()"/>
        <html:button property="" styleId="implemento" value="  Atrás  "/>

        <br><div style="clear: both;">&nbsp;</div><br>

        <%-- AQUI COMIENZA LA IMPRESION DE LA TABLA DE RESULTADOS --%>
        <div id="consultarImp" style="overflow:auto">

            <table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"  >
                <thead>
                    <tr>
                        <th><h14>Tipo</h14></th>
                <th><h14>Subtipo</h14></th>
                <th><h14>Marca</h14></th>
                <th><h14>Status</h14></th>
                <th><h14>Duración Estimada</h14></th>
                <th><h14>Duración Real</h14></th>
                <th><h14>Calificación</h14></th>
                <th><h14>Características Adicionales</h14></th>
                <th><h14>Frecuencia de Uso</h14></th>
                <th><h14>Modificar</h14></th>
                </tr>
                </thead>
                <tbody id="resultado">
                </tbody>
            </table>

        </div>
        <div style="clear: both;">&nbsp;</div>


        <%-- Aquí se manejan las flechas, cantidad de paginas a mostrar y numero de pagina --%>
        <%-- esto no es necesario cambiarlo --%>
        <%@ include file='paginasTabla.jsp' %>

    </center>
</div>
<div style="clear: both;">&nbsp;</div>

